<template>
    <view class="content">
        <pure-cell title="切换器模式">
            <template #desc>
                <view class="buttons">
                    <pure-button text="不显示" :class="switchMode === 'none' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="switchMode = 'none'"></pure-button>
                    <pure-button text="切换月" :class="switchMode === 'month' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="switchMode = 'month'"></pure-button>
                    <pure-button text="切换年/月"
                        :class="switchMode === 'year-month' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="switchMode = 'year-month'"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="日期选择模式">
            <template #desc>
                <view class="buttons">
                    <pure-button text="单选" :class="mode === 'single' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="mode = 'single'"></pure-button>
                    <pure-button text="多选" :class="mode === 'multiple' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="mode = 'multiple'"></pure-button>
                    <pure-button text="区间选择" :class="mode === 'range' ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="mode = 'range'"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="格式化水印">
            <template #desc>
                <view class="buttons">
                    <pure-button text="默认" :class="!isFormatWatermark ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isFormatWatermark = false"></pure-button>
                    <pure-button text="自定义格式" :class="isFormatWatermark ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isFormatWatermark = true"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="格式化月标题">
            <template #desc>
                <view class="buttons">
                    <pure-button text="默认" :class="!isFormatMonthTitle ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isFormatMonthTitle = false"></pure-button>
                    <pure-button text="自定义格式" :class="isFormatMonthTitle ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isFormatMonthTitle = true"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="副标题">
            <template #desc>
                <view class="buttons">
                    <pure-button text="隐藏" :class="!subtitle ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="subtitle = false"></pure-button>
                    <pure-button text="显示" :class="subtitle ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="subtitle = true"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="只读模式">
            <template #desc>
                <view class="buttons">
                    <pure-button text="否" :class="!readonly ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="readonly = false"></pure-button>
                    <pure-button text="是" :class="readonly ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="readonly = true"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="自定义周文字">
            <template #desc>
                <view class="buttons">
                    <pure-button text="默认" :class="!isCustomWeek ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isCustomWeek = false"></pure-button>
                    <pure-button text="自定义" :class="isCustomWeek ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="isCustomWeek = true"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>

        <pure-cell title="最多选择天数">
            <template #desc>
                <view class="buttons">
                    <pure-button text="无限制" :class="maxRange === null ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="maxRange = null"></pure-button>
                    <pure-button text="3天" :class="maxRange === 3 ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="maxRange = 3"></pure-button>
                    <pure-button text="5天" :class="maxRange === 5 ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="maxRange = 5"></pure-button>
                    <pure-button text="7天" :class="maxRange === 7 ? 'pure-button-primary' : 'pure-button-info'"
                        @onClick="maxRange = 7"></pure-button>
                </view>
            </template>
        </pure-cell>

        <a-gap></a-gap>
        <a-gap></a-gap>

        <a-demo title="弹窗展示">
            <pure-cell title="选择日期" icon="__rili" arrow @onClick="handleShowCalendar">
                {{ selectedDate }}
            </pure-cell>
        </a-demo>

        <!-- 日历弹窗 -->
        <pure-calendar :switchMode="switchMode" :mode="mode" :show="show" @close="handleClose" @confirm="handleConfirm"
            :formatWatermark="formatWatermark" :formatMonthTitle="formatMonthTitle" :subtitle="subtitle"
            :readonly="readonly" :week="isCustomWeek ? customWeek : week" :maxRange="maxRange"
            @outMaxRange="handleOutMaxRange" showDate="2025-6-5"></pure-calendar>

        <a-demo title="平铺展示">
            <pure-calendar :switchMode="switchMode" :mode="mode" :poppable="false" :formatWatermark="formatWatermark"
                :formatMonthTitle="formatMonthTitle" :subtitle="subtitle" :readonly="readonly"
                :week="isCustomWeek ? customWeek : week" :maxRange="maxRange" @outMaxRange="handleOutMaxRange"
                :defaultDate="defaultDate" :disabledDate="disabledDate"></pure-calendar>
        </a-demo>

        <a-demo title="自定义样式">
            <pure-calendar :switchMode="switchMode" :mode="mode" :formatDay="formatDay" :poppable="false"
                :formatWatermark="formatWatermark" :formatMonthTitle="formatMonthTitle" :subtitle="subtitle"
                :readonly="readonly" :week="isCustomWeek ? customWeek : week" :maxRange="maxRange"
                @outMaxRange="handleOutMaxRange">
            </pure-calendar>
        </a-demo>
    </view>
</template>

<script setup>
import { ref } from "vue";

// 默认值
const defaultDate = ref(["2025-04-20"]);

// 禁用项
const disabledDate = ref(["2025-04-25"]);

// 切换器模式
const switchMode = ref("none");

// 日期选择模式
const mode = ref("single");

// 显示状态
const show = ref(false);

// 选中的日期
const selectedDate = ref("请选择");

// 格式化水印
const isFormatWatermark = ref(false);

// 格式化月标题
const isFormatMonthTitle = ref(false);

// 显示副标题
const subtitle = ref(false);

// 只读模式
const readonly = ref(false);

// 自定义周
const isCustomWeek = ref(false);

// 默认周
const week = ref(["日", "一", "二", "三", "四", "五", "六"]);
// 自定义周
const customWeek = ref(["牛马七", "牛马一", "牛马二", "牛马三", "牛马四", "牛马五", "牛马六"]);

// 最多选择天数
const maxRange = ref(null);

// 格式化Day
function formatDay(day) {
    const dayStyle = "width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;";
    const labelStyle = "font-size: 0.75em; opacity: 0.25;";
    const badgeStyle = "width: 6px; height: 6px; border-radius: 50%; background: #FF0000; position: absolute; right: 5px; top: 5px; z-index: 2;";
    const text = day.selected ? "已选" : "未选";

    if (day.day > 10 && day.day < 20) {
        return `
                <div class="day" style="${dayStyle}">
                    <div class="day-number">${day.day}</div>
                    <div class="day-label" style="${labelStyle}">${text}</div>
                    <div class="day-badge" style="${badgeStyle}"></div>
                </div>
            `;
    }
    return `
            <div class="day" style="${dayStyle}">
                <div class="day-number">${day.day}</div>
                <div class="day-label" style="${labelStyle}">${text}</div>
            </div>
        `;
}

// 格式化水印
function formatWatermark(month) {
    if (isFormatWatermark.value) return `${month.month}月`;
    return `${month.month}`;
}

// 格式化月标题
function formatMonthTitle(month) {
    if (isFormatMonthTitle.value) return `${month.year}/${month.month}`;
    return `${month.year}年${month.month}月`;
}

// 显示日历
function handleShowCalendar() {
    show.value = true;
}

// 关闭日历
function handleClose() {
    show.value = false;
}

// 确认选择
function handleConfirm(selectedDates) {
    console.log("选中的日期：", selectedDates);
    // 单选
    if (mode.value === "single") {
        selectedDate.value = selectedDates[0]?.str;
    }
    // 多选
    else if (mode.value === "multiple") {
        selectedDate.value = `选择了${selectedDates.length}个日期`;
    }
    // 区间
    else if (mode.value === "range") {
        selectedDate.value = `${selectedDates[0]?.str} ~ ${selectedDates[selectedDates.length - 1]?.str}`;
    }
    show.value = false;
}

// 超出限制
function handleOutMaxRange() {
    uni.showToast({
        title: `最多选择${maxRange.value}天`,
        icon: "none",
    });
}
</script>

<style scoped>
.content {
    --pure-button-font-size: 12px;
    --pure-button-padding: 4px 8px;
}

.buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex: 1;
    flex-shrink: 0;
    justify-content: flex-end;
}
</style>
